<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
</head>
<body>
<span th:fragment="main">
    <div class="attribute-tab w-100 d-none" id="attribute-tab-5">

        <div class="jqueryui-tabs">
            <ul>
                <li><a id="loggingConfigurationOps" href="#logconfiguration-tab">Loggers</a></li>
                <li><a id="loggingDataStreamOps" href="#logdatastream-tab">Log Events</a></li>
                <li><a id="auditEvents" href="#auditevents-tab">Audit Events</a></li>
                <li><a id="casEvents" href="#casEvents-tab">Application Events</a></li>
            </ul>
            <div id="logconfiguration-tab">
                <table id="loggersTable" class="mdc-data-table__table table table-striped noborder">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Logger</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Level</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
            </div>
            <div id="logdatastream-tab">
                <p>The latest log statements from CAS application displayed and streamed here.</p>

                <div class="d-flex">
                    <label for="logLevelFilter">
                        Log Level:
                        <select id="logLevelFilter" class="jqueryui-selectmenu">
                            <option value="" selected>DEFAULT</option>
                            <option value="TRACE">TRACE</option>
                            <option value="DEBUG">DEBUG</option>
                            <option value="INFO">INFO</option>
                            <option value="WARN">WARN</option>
                            <option value="ERROR">ERROR</option>
                        </select>
                    </label>
                    <label for="logCountFilter" class="pl-2">
                        Entries:
                        <select id="logCountFilter" class="jqueryui-selectmenu">
                            <option value="5">Last 5 Entries</option>
                            <option value="15">Last 15 Entries</option>
                            <option value="25" selected>Last 25 Entries</option>
                            <option value="50">Last 50 Entries</option>
                            <option value="100">Last 100 Entries</option>
                            <option value="150">Last 150 Entries</option>
                            <option value="200">Last 200 Entries</option>
                            <option value="500">Last 500 Entries</option>
                        </select>
                    </label>
                    <label for="logRefreshFilter" class="pl-2">
                        Refresh:
                        <select id="logRefreshFilter" class="jqueryui-selectmenu">
                            <option value="1000">Every 1 Seconds</option>
                            <option value="5000" selected>Every 5 Seconds</option>
                            <option value="15000">Every 15 Seconds</option>
                            <option value="30000">Every 30 Seconds</option>
                            <option value="60000">Every 60 Seconds</option>
                        </select>
                    </label>
                </div>
                
                <div class="d-flex">
                    <pre><code id="logDataStream" style="height: 75vh; overflow-y: scroll;overflow-x: hidden;"
                               class="border-rounded language-json text-wrap"></code></pre>
                    <pre><code id="logFileStream" style="height: 75vh; overflow-y: scroll;overflow-x: hidden;"
                               class="border-rounded language-json text-wrap"></code></pre>
                </div>
                <div th:replace="~{fragments/switchbutton :: switchbutton (id='scrollLogs', label='screen.checkbox.scrolllogs.title')}"/>
            </div>
            <div id="auditevents-tab">
                <p>The latest audit log statements from CAS application displayed and streamed here.</p>
                <div class="d-flex">
                    <label for="auditEventsIntervalFilter" class="pl-2">
                        Interval:
                        <select id="auditEventsIntervalFilter" class="jqueryui-selectmenu">
                            <option value="PT1M">Last Minute</option>
                            <option value="PT5M">Last 5 Minute(s)</option>
                            <option value="PT10M" selected>Last 10 Minutes</option>
                            <option value="PT30M">Last 30 Minutes</option>
                            <option value="PT1H">Last Hour</option>
                            <option value="PT2H">Last 2 Hours</option>
                            <option value="PT4H">Last 4 Hours</option>
                            <option value="PT8H">Last 8 Hours</option>
                            <option value="PT24H">Last 24 Hours</option>
                        </select>
                    </label>
                    <label for="auditEventsCountFilter" class="pl-2">
                        Entries:
                        <select id="auditEventsCountFilter" class="jqueryui-selectmenu">
                            <option value="5">Last 5 Entries</option>
                            <option value="15">Last 15 Entries</option>
                            <option value="25" selected>Last 25 Entries</option>
                            <option value="50">Last 50 Entries</option>
                            <option value="100">Last 100 Entries</option>
                            <option value="150">Last 150 Entries</option>
                            <option value="200">Last 200 Entries</option>
                            <option value="500">Last 500 Entries</option>
                        </select>
                    </label>
                    <label for="auditEventsRefreshFilter" class="pl-2">
                        Refresh:
                        <select id="auditEventsRefreshFilter" class="jqueryui-selectmenu">
                            <option value="1000">Every 1 Seconds</option>
                            <option value="5000" selected>Every 5 Seconds</option>
                            <option value="15000">Every 15 Seconds</option>
                            <option value="30000">Every 30 Seconds</option>
                            <option value="60000">Every 60 Seconds</option>
                        </select>
                    </label>
                </div>
                
                <table id="auditEventsTable" class="mdc-data-table__table table table-striped noborder">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Principal</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Resource</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Action</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Date</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">IP Address</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">User Agent</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
            </div>
            <div id="casEvents-tab">
              <p>The CAS application events retrieved from the event repository.</p>

                <div class="d-flex">
                    <label for="casEventsRefreshFilter" class="pl-2">
                        Refresh:
                        <select id="casEventsRefreshFilter" class="jqueryui-selectmenu">
                            <option value="1000">Every 1 Seconds</option>
                            <option value="5000" selected>Every 5 Seconds</option>
                            <option value="15000">Every 15 Seconds</option>
                            <option value="30000">Every 30 Seconds</option>
                            <option value="60000">Every 60 Seconds</option>
                        </select>
                    </label>
                </div>
                <table id="casEventsTable" class="mdc-data-table__table table table-striped noborder">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Timestamp</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Type</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">ID</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Principal</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Client IP</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Server IP</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">User Agent</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Tenant</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Device Fingerprint</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">GeoLocation</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</span>
</body>
</html>
